<template>
    <div class="recommend-sec">
<!--        <van-pull-refresh class="van-clearfix" v-model="refreshing" @refresh="onRefresh">-->
<!--            <van-list class="van-clearfix"-->
<!--                v-model="loading"-->
<!--                :finished="finished"-->
<!--                finished-text="没有更多了~"-->
<!--                :offset="offset"-->
<!--                @load="onLoad"-->
<!--            >-->
<!--                <good-list :dataList="goodList"></good-list>-->
<!--            </van-list>-->
<!--        </van-pull-refresh>-->
        <good-list :dataList="goodList"></good-list>
    </div>
</template>

<script>
    // 引入商品列表组件
    import goodList from "@/components/goodList/goodList";

    export default {
        components: {goodList},
        data() {
            return {
                goodList: [],
                loading: false,         // 是否处于加载状态，加载过程中不触发load事件
                finished: false,        // 是否已加载完成，加载完成后不再触发load事件
                refreshing: false,      // 是否刷新
                offset: 1000
            }
        },
        methods: {
            onLoad() {
                this.getDataList2();
            },
            getDataList() {
                    if (this.refreshing) {
                        this.goodList = [];
                        this.refreshing = false;
                    }
                    // 如果列表数据已经到达一定数量则不再追加
                    if (this.goodList.length >= 24) {
                        // 加载完成，finished为true，此时不会触发load事件
                        this.finished = true;
                    } else {
                        // 发送异步请求获取数据列表
                        // 加载中，loading为true，表示正在发送异步请求，此时不会触发load事件
                        this.loading = true;
                        this.$axios.get('/goodList').then(res => {
                            // 如果有数据则追加到列表中
                            // console.log('goodList:', res.data.goodList);
                            this.goodList.concat(res.data.goodList);
                            // 非加载中，loading为false，此时会根据列表滚动位置判断是否触发load事件（列表内容不足一屏幕时，会直接触发）
                            this.loading = false;
                        });
                    }
                // setTimeout(() => {
                // }, 1000);
            },
            onRefresh() {
                // 清空列表数据
                this.goodList = [];
                this.finished = false;

                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad();
            },
            getDataList2() {
                if (this.goodList.length >= 36) {
                    this.finished = true;
                    this.loading = false;
                } else {
                    let _this = this;
                    this.$axios.get('/goodList').then(res => {
                        // 如果有数据则追加到列表中
                        _this.loading = false;
                        // console.log('goodList:', res.data.goodList);
                        _this.$set(_this, 'goodList', _this.goodList.concat(res.data.goodList));
                        _this.finished = false;
                    });
                }
            }
        },
        mounted() {
            this.$axios.get('/goodList').then(res => {
                // console.log('goodList:', res.data.goodList);
                this.goodList = res.data.goodList;
            });
        }
    }
</script>

<style lang="less" scoped>
    /* 今日推荐区域 */
    .recommend-sec {
        /*padding: 195px 0 98px 0;*/
        /*height: 3200px;*/
        padding-bottom: 98px;
    }
</style>
